<template>
  <div>
    <van-nav-bar title="新用户注册" />
    <div>
      <van-image
          round
          width="6rem"
          height="6rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </div>
    <van-form>
      <van-cell-group inset>
        <van-field
            v-model="user.username"
            name="用户名"
            label="用户名"
            @change="checkName"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        >
          <template #button>
            <van-icon v-if="namemsg==0" name="success" color="green"/>
            <van-icon v-else name="cross" color="red"/>0
          </template>
        </van-field>
        <van-field
            v-model="user.phone"
            name="手机号"
            @change="checkPhone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
        >
          <template #button>
            <van-icon v-if="phonemsg==0" name="success" color="green"/>
            <van-icon v-else name="cross" color="red"/>
          </template>
        </van-field>
        <van-field
            v-model="smscode"
            center
            clearable
            @change="checkCode"
            label="短信验证码"
            placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
          </template>
        </van-field>
        <van-field
            v-model="user.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="password2"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="请再次输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="button" @click="add">
          注册新用户
        </van-button>
      </div>
    </van-form>
    <div style="color: #888888;font-size: 10px">
      <div style="float: left;margin-left: 20px">
        已有账号<router-link to="/login">点击注登录</router-link>
      </div>
      <div style="float: right;margin-right: 20px">
        忘记密码<router-link to="/find">点击找回</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import axios from 'axios'
const user=new ref({});

import {useRouter} from 'vue-router'
const router=useRouter();

const password2=new ref("");
const smscode=new ref("")
const namemsg=new ref(1);
const phonemsg=new ref(1);
const checkName = () => {
  //校验用户名
  axios.get("user/checkname?name="+user.value.name).then(res=>{
    if(res.data.code==0){
      namemsg.value=0;
    }else {
      namemsg.value=1;
      alert(res.data.data);
    }
  })
}
const checkPhone = () => {
  //校验用户名
  axios.get("user/checkphone?phone="+user.value.phone).then(res=>{
    if(res.data.code==0){
      phonemsg.value=0;
    }else {
      phonemsg.value=1;
      alert(res.data.data);
    }
  })
}
const sendCode = () => {
  //发送验证码
  axios.get("sms/sendrcode?phone="+user.value.phone).then(res=>{
    if(res.data.code==0){
      alert("亲，验证码已发送，请检查手机！")
    }else {
      alert(res.data.data);
    }
  })
}
const checkCode = () => {
  //校验验证码
  var up={
    phone:user.value.phone,
    code:smscode.value
  }
  axios.post("sms/checkrcode",up).then(res=>{
    if(res.data.code==0){
      //校验
      alert("验证码校验成功")
    }else{
      alert(res.data.data);
    }
  })
}
const add=()=>{
  //注册 请求接口
  axios.post("user/register",user.value).then(res=>{
    if(res.data.code==0){
      //注册成功
      router.push("/login");
      //跳转登录页面
    }else{
      alert(res.data.data);
    }
  })
}
</script>

<style scoped>

</style>
